<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reactive-demo</title>
  </head>
  <body>
    <input type="text" id="txt" /><br />
    <span id="sp"></span>

    <script>
      let obj = {},
        txt = document.getElementById("txt"),
        sp = document.getElementById("sp");

      Object.defineProperty(obj, "msg", {
        get() {
          return txt.value;
        },
        set(newValue) {
          txt.value = newValue;
          sp.innerText = newValue;
        },
      });

      txt.addEventListener("keyup", (event) => {
        obj.msg = event.target.value;
      });
    </script>
  </body>
</html>
